<template>
  <div class="playbar" v-if="currentSong">
    <img
      :src="(currentSong.picUrl || currentSong.al.picUrl)|picUrl"
      alt=""
      class="headpic"
      :class="{ anima: playing }"
    />
    <h2 class="title">
      {{ currentSong.name
      }}<span>
        -
        {{
          currentSong.song
            ? currentSong.song.album.artists[0].name
            : currentSong.ar[0].name
        }}</span
      >
    </h2>
    <PlayPause
      @audio-play-handler="$emit('audio-play-handler')"
      @audio-pause-handler="$emit('audio-pause-handler')"
      :playing="playing"
      :currentSong="currentSong"
      :duration="duration"
      :currentTime="currentTime"
    ></PlayPause>
    <div class="list">
      <i class="fonticon iconfont icon-bofangliebiao" @click.stop="$emit('show-list')"></i>
    </div>
  </div>
</template>

<script>
import PlayPause from "@/components/PlayPause.vue";

export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    duration: Number,
    currentTime: Number,
  },
  components: {
    PlayPause,
  },
  data:function(){
    return{
    }
  }
};
</script>

<style lang="less" scoped>
.playbar {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  display: flex;
  background-color: #ccc;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  border-radius: 16px 16px 0 0;
  z-index: 11;
  .headpic {
    width: 45px;
    height: 45px;
    border: 8px solid #000;
    border-radius: 50%;
    margin-right: 10px;
    animation: headrotate 4s linear infinite;
    animation-play-state: paused;
    &.anima {
      animation-play-state: running;
    }
  }
  .title {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span {
      color: #888;
      font-size: 12px;
    }
  }

  .list {
    margin: 5px;
    .fonticon {
      font-size: 30px;
      z-index: 4;
    }
  }
}
@keyframes headrotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>